gtkplacesview: rotate server list icon on toggled

Disclosure triangles are usually used pointing down, however
in this case the popover spawns in the upper direction, which
makes it odd looking.
Instead of pointing always down or up, point down when not toggled and
animate a rotation when toggled.

https://bugzilla.gnome.org/show_bug.cgi?id=756568

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 43bc9c23cce473732fee5fe3d19844907f7f68e1..df50fb94dae5829e8e615b0c5167a13f15315023 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2913,6 +2913,22 @@ GtkPlacesSidebar.sidebar {
   }
 }
 
+/****************
+ * File chooser *
+ ****************/
+
+GtkPlacesView {
+  .server-list-button > GtkImage {
+    transition: 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  .server-list-button:checked > GtkImage {
+    transition: 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(-0.5turn);
+  }
+}
+
 /*********
  * Paned *
  *********/

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 1f195d97442228faf8464676bdf8c92975d9978f..8d8deec5b9a25892052fdb481676ad8dbabf21c5 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -3966,6 +3966,16 @@ GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
   .sidebar-item.needs-attention > .label {
     background-size: 6px 6px, 0 0; }
 
+/****************
+ * File chooser *
+ ****************/
+GtkPlacesView .server-list-button > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(0turn); }
+GtkPlacesView .server-list-button:checked > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(-0.5turn); }
+
 /*********
  * Paned *
  *********/

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index e3684a6f3fc5ee831c9357cbbc9625e38fe0d997..0a5a44f87ae87d7c5c5f302eb4444f5dca50c8b9 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4138,6 +4138,16 @@ GtkPlacesSidebar.sidebar .sidebar-new-bookmark-row {
   .sidebar-item.needs-attention > .label {
     background-size: 6px 6px, 0 0; }
 
+/****************
+ * File chooser *
+ ****************/
+GtkPlacesView .server-list-button > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(0turn); }
+GtkPlacesView .server-list-button:checked > GtkImage {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  -gtk-icon-transform: rotate(-0.5turn); }
+
 /*********
  * Paned *
  *********/

diff --git a/gtk/ui/gtkplacesview.ui b/gtk/ui/gtkplacesview.ui
index d554c28d095bedecdbadd29da199882fa4b08f41..697825528e91b70f6cccb70339da6f128b6518f7 100644 (file)
--- a/gtk/ui/gtkplacesview.ui
+++ b/gtk/ui/gtkplacesview.ui
@@ -256,10 +256,13 @@
                 <property name="receives_default">1</property>
                 <property name="direction">up</property>
                 <property name="popover">recent_servers_popover</property>
+                <style>
+                  <class name="server-list-button"/>
+                </style>
                 <child>
                   <object class="GtkImage">
                     <property name="visible">1</property>
-                    <property name="icon_name">pan-up-symbolic</property>
+                    <property name="icon_name">pan-down-symbolic</property>
                   </object>
                 </child>
               </object>